<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet"
	href="${pageContext.request.contextPath }/css/style.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath }/css/bootstrap.min.css">
<script src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script>
<title>Home page</title>
</head>
<body>

	<div class="home-container" id="top">
		<jsp:include page="header.jsp"/>

		<div class="mid-nav center outer-carousel">
			<div id="carousel-example-generic" class="carousel slide"
				data-ride="carousel">
				<!-- Indicators -->
				<ol class="carousel-indicators">
					<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
					<li data-target="#carousel-example-generic" data-slide-to="1"></li>
					<li data-target="#carousel-example-generic" data-slide-to="2"></li>
				</ol>

				<!-- Wrapper for slides -->
				<div class="carousel-inner" role="listbox">
					<div class="item active">
						<a href="javascript:void(0)"> <img
							src="${pageContext.request.contextPath }/img/1.jpg">
							<div class="carousel-caption">M记</div>
						</a>
					</div>
					<div class="item">
						<a href="javascript:void(0)"> <img
							src="${pageContext.request.contextPath }/img/2.jpg">
							<div class="carousel-caption">必胜客</div>
						</a>
					</div>
					<div class="item">
						<a href="javascript:void(0)"> <img
							src="${pageContext.request.contextPath }/img/3.jpg">
							<div class="carousel-caption">贡茶</div>
						</a>
					</div>
				</div>

				<!-- Controls -->
				<a class="left carousel-control" href="#carousel-example-generic"
					role="button" data-slide="prev"> <span
					class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
					<span class="sr-only">Previous</span>
				</a> <a class="right carousel-control" href="#carousel-example-generic"
					role="button" data-slide="next"> <span
					class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
					<span class="sr-only">Next</span>
				</a>
			</div>
		</div>


		<div class="mid-nav">
			<div class="m-type">
				<span class="col-md-2 filter-title">商家分类</span>
				<ul class="col-md-10 nav nav-pills choose-menu" role="tablist">
					<li role="presentation"><a href="${pageContext.request.contextPath }/index" >全部 </a></li>
					<li role="presentation"><a href="${pageContext.request.contextPath }/index?type=1">精品快餐</a></li>
					<li role="presentation"><a href="${pageContext.request.contextPath }/index?type=2">美食小吃</a></li>
					<li role="presentation"><a href="${pageContext.request.contextPath }/index?type=3">甜点饮品</a></li>
				</ul>
			</div>

			<div class="row list-row">
				<c:forEach var="m" items="${mList }">
					<div class="col-sm-6 col-md-4">
						<div class="thumbnail">
							<a
								href="${pageContext.request.contextPath }/loadDish?mid=${m.mid}">
								<img src="${imgPath}/image/${m.logo}" class="home-img">
								<div class="caption">
									<h3>${m.mname}</h3>
									<span class="glyphicon glyphicon-phone-alt tel-icon"></span> <b>${m.tel}</b>
								</div>
							</a>
						</div>
					</div>
				</c:forEach>
			</div>

			<nav class="page-ctrl">
			<ul class="pagination">${pageCode}
			</ul>
			</nav>

		</div>

		<a href="#top">
			<div class="top-box">
				<span class="glyphicon glyphicon-chevron-up back-icon"></span>
			</div>
		</a>


	</div>
	</div>
</body>
</html>